<template>
	<view class="content">
		<view class="topNav">
			<view class="topNav" style="margin:0 -32rpx ;padding32rpx ;height: 90rpx;">
				<div class="cuIcon-back icon left" @click="back"></div>
				<div class="center">视频详情</div>
			</view>
		</view>
		<div style="width: 100%;height: 90rpx;"></div>
		<div class='videoCont'>
			<!-- <video src="http://182.92.112.230:8899/uploads/20211115/4a937b525266eadd5e3d4e3d6022b870.mp4"></video> -->
<!-- 			<video src="http://182.92.112.230:8899/uploads/20211115/4a937b525266eadd5e3d4e3d6022b870.mp4" autoplay="">
			    <cover-view></cover-view>
			</video> -->
			<!-- <video class="myVideo" @timeupdate="videoTimeUpdateEvent" :poster="imgurl"   src="http://182.92.112.230:8899/uploads/20211115/4a937b525266eadd5e3d4e3d6022b870.mp4">
				</video> -->
			<video class="myVideo" @timeupdate="videoTimeUpdateEvent" :poster="imgurl"  :src="data.url" controls autoplay>
				</video>
			<div class='videoInfo'>
				<div class='title'>{{data.name}}</div>
				<div class='subtitle'>
					<!-- <div><span class='subtitleIcon' style='display: inline-block;margin-right: 10rpx;'></span> {{data.name}}</div> -->
					<div class='num'>{{data.read_num+data.read_num_supplement}}次播放</div>
				</div>
			</div>
		</div>
	<!-- 	<div class='more'>
			<div class='contTitle'>推荐视频</div>
			<div class='moreVideo'>
			<div class='item' v-for='(recommendItem,index) in recommend' :key="'index'+index" @click='toNext(recommendItem)'>
				<img :src="recommendItem.cover_picture" alt="" class='VideoItem'>
				 <div>{{recommendItem.name}}</div>
			</div>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</div>
			
		</div> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				from:8,
				data: {},
				recommend:[],
				viewing_time:'00:00:00',//格式00:00:00
				play_done:0,//0未完成 1已完成
				imgurl:''//视频封面
			}
		},
		onLoad(e) {
			//console.log('e==入参===', e)
			this.id = e.id
			this.from = e.from||8
		},
		onShow() {

			this.getData()
			//console.log('执行了onShow')
			this.videoContext = uni.createVideoContext('myVideo');
		},
		mounted() {},
		onHide() {
			// console.log('离开了视频详情页面,修改视频状态1')
			this.setType()
		},
		beforeDestroy(){
			// this.setType()
			// console.log('离开了视频详情页面,修改视频状态2')
		},
		methods: {
			back() {
				if(this.from==8){
					// uni.navigateTo({
					// 	url: `/pages/course/index`
					// });
					uni.navigateTo({
						url: `/pages/index/index?type=3`
					});
				}else{
					uni.navigateTo({
						url: `/pages/my/watchRecord`
					});
				}
				// uni.navigateBack()
			},
			format(seconds) {
			            let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600);
			            seconds -= 3600 * hour;
			            let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(seconds / 60);
			            seconds -= 60 * min;
			            let sec = seconds >= 10 ? seconds : '0' + seconds;
			            return hour + ':' + min + ':' + sec;
			        },
			videoTimeUpdateEvent(e) { // 播放进度改变
				// e.detail.currentTime为每次触发时,视频的当前播放时间
				let currentTime = parseInt(e.detail.currentTime);
				let videoTime = this.format(currentTime)
				// //console.log(e.detail,'播放进度条改变', currentTime,videoTime)
				// 试看结束 this.class_info.freed_time为试看时间
				if(e.detail.currentTime>=e.detail.duration){
					//console.log('视频结束了')
					this.viewing_time=videoTime
					this.play_done=1
				}else{
					//console.log('视频没有结束')
					this.viewing_time=videoTime
					this.play_done=0
				}
				// if (currentTime >= this.class_info.freed_time) {
				// 	// 试看结束,在这做一些想做的操作,例如停止视频播放
				// 	this.videoContext.exitFullScreen();
				// 	this.videoContext.pause();
				// 	this.videoContext.seek(0);
				// }
				
				
			},
			getData() {
				let _this = this;
				_this.uniRequest({
					url: `/video/detail`,
					method: 'post',
					data: {
						id: _this.id
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.data = res.data.video;
							this.recommend = res.data.recommend||[];
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			setType(){
				let _this = this;
				_this.uniRequest({
					url: `/video/play_record`,
					method: 'post',
					data: {
						video_id: _this.id,
						viewing_time: _this.viewing_time,
						play_done: _this.play_done,
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			toNext(item) {
				uni.navigateTo({
					url: `/pages/video/details?id=${item.id}&from=${this.from}`
				});
			},
		}
	}
</script>

<style lang='less' scoped>
	.content {
		min-height: 100vh;
		background: #ece8e5;
		.topNav {
			background: #1C81DF;
			color: white;
			background: #fffaf0;
						color: #000000;
		}

		.myVideo {
			width: 100%;
			min-height: 450rpx;
		}

		.videoInfo {
			display: flex;
			justify-content: space-between;
			padding: 32rpx 0;
			margin: 0 32rpx;
			width: calc(100% - 64rpx);
			box-sizing: border-box;
			border-bottom: 1px solid #E2E4E7;
			flex-wrap: wrap;
			align-items: center;
			.title {
				width: 75%;
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				text-overflow: -o-ellipsis-lastline;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 2;
				  line-clamp: 2;
				  -webkit-box-orient: vertical
			}

			.subtitle {
				padding-top: 16rpx;
				font-size: 26rpx;
				font-weight: normal;
				color: #1C81DF;
				display: flex;
				width: 20%;
				justify-content: space-between;

				.subtitleIcon {
					background: url(~@/static/imgs/icon_list_erji_liebiao.png) no-repeat center;
					background-size: 100% 100%;
					width: 24rpx;
					height: 26rpx;
					vertical-align: text-top;
				}
			}

			.num {
				font-size: 22rpx;
				font-weight: normal;
				color: #959BA5;
			}
		}

		.contTitle {
			font-size: 34rpx;
			font-weight: bold;
			color: #000000;
			padding-left: 32rpx;
			position: relative;
			margin: 32rpx;
		}

		.contTitle::before {
			content: '';
			position: absolute;
			left: 0;
			top: calc(50% - 16rpx);
			width: 10rpx;
			height: 32rpx;
			background: linear-gradient(0deg, #1C81DF 0%, #41B1F6 100%);
		}
		.moreVideo{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: -32rpx 32rpx 32rpx;
			width: calc(100% - 64rpx);
			.item{
				width: 334rpx;
				margin-top: 32rpx;
				.VideoItem{
					width: 334rpx;
					height: 220rpx;
					border-radius: 12rpx;
				}
				
				div{
					width:100%;
					font-size: 30rpx;
					font-weight: normal;
					color: #181E27;
					line-height: 48rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			>i{
				width: 334rpx;
			}
		}
	}
</style>
